<template>
  <div class="search">
    <van-sticky offset-top="0rem">
      <div class="search_bottom">
        <svg class="icon" aria-hidden="true" @click="router.back()">
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <input
          type="text"
          placeholder="请输入关键字"
          @keydown.enter="enterKey"
          v-model="searchKey"
          class="input"
        />
      </div>
    </van-sticky>

    <div class="search_his" v-if="cache.getCache('keyWorldList')">
      <span class="span_one">历史:</span>
      <div class="hisList">
        <span
          class="spanHis"
          v-for="item in keyWorldList.value ?? cache.getCache('keyWorldList')"
          :key="item"
          @click="changeSearchKey($event, item)"
          >{{ item }}</span
        >
      </div>
      <svg class="icon" aria-hidden="true" @click="clearKey">
        <use xlink:href="#icon-shanchu"></use>
      </svg>
    </div>
    <div class="search_list" v-if="dataList">
      <base-list :dataList="dataList"></base-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import cache from '@/utils/cache/cache'
import { useStore } from '@/store'

import baseList from '@/base_ui/List/base_List.vue'

const router = useRouter()
const store = useStore()
//搜索框关键字
const searchKey = ref('')
//历史关键字
const keyWorldList: any = ref([])
//实现搜索功能
const queryInfo = {
  pageName: '/search',
  keywords: '',
  loading: true
}
//按下搜索键 将搜索关键字加入历史
const enterKey = () => {
  //刷新页面后取出储存的值赋给keyWorldList 避免刷新后的历史再次输入就会清空
  if (cache.getCache('keyWorldList')) {
    keyWorldList.value = cache.getCache('keyWorldList')
  }
  //去除空格
  searchKey.value = searchKey.value.replace(/^\s+|\s+$/g, '')
  //有值才能进行
  if (searchKey.value != '') {
    //在最前面增加数组
    keyWorldList.value.unshift(searchKey.value)
    //数组去重
    keyWorldList.value = [...new Set(keyWorldList.value)]
    //最多显示五个
    if (keyWorldList.value.length > 10) {
      keyWorldList.value.pop()
    }
    queryInfo.keywords = searchKey.value
    cache.setCache('keyWorldList', keyWorldList.value)
    //实现搜索功能
    store.dispatch('songList/getSearchSongList', queryInfo)
    searchKey.value = ''
  }
}
const clearKey = () => {
  keyWorldList.value = []
  cache.deleteCache('keyWorldList')
}
//点击历史映射到搜索框
// onblur:onfocus
const changeSearchKey = (e: any, item: any) => {
  searchKey.value = item
  enterKey()
}
//获取歌曲列表
const dataList = computed(() => store.state.songList.singerColumn)
console.log(dataList)
</script>

<style scoped lang="less">
.search {
  width: 100%;
  height: 100%;
  overflow: scroll;
  .search_bottom {
    width: 100%;
    height: 1rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    input {
      margin-left: 0.2rem;
      border: none;
      border-bottom: 1px solid #999;
      flex: 1;
      padding: 0.1rem;
    }
  }
  .search_his {
    width: 100%;
    padding: 0.2rem;
    padding-top: 0;
    position: relative;
    display: flex;
    align-items: center;
    .span_one {
      font-weight: 700;
    }
    .hisList {
      flex: 1;
      overflow: scroll;
      white-space: nowrap;
      margin: 0 0.1rem;
      display: flex;
      align-items: center;
      .spanHis {
        max-width: 2rem;
        display: inline-block;
        background-color: rgb(240, 237, 237);
        padding: 0.1rem 0.1rem;
        border-radius: 0.2rem;
        margin: 0.1rem 0.1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .icon {
      width: 0.3rem;
      height: 0.3rem;
    }
  }
}
</style>
